/*
  学习目标：使用useState 给函数式组件声明状态
  语法: const [状态变量, 更新状态变量的函数] useState(初始值)
  步骤：
     1. 导入useState, 从react包中
     2. 调用useState函数
     3. 解构状态变量 和 更新状态的函数
*/

import React, { Component, useState } from 'react';

export default function App() {
  //  count 等同于this.state.count
  // setCount 等同于this.setState({count： 新值})
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('hello React');

  // 注意:
  // 💥1. 是数组解构
  // 💥2. hooks只能用在函数式组件中， 而不能用在class组件中

  return (
    <>
      <h1>
        App - {count} - {msg}
      </h1>
      <button onClick={() => setCount(count + 1)}>点我+1</button>
      <button onClick={() => setMsg(msg + '~')}>点我+~</button>
    </>
  );
}
